<template>
  <div id="zonghechart1">
    <div
      class="chartradar"
      ref="chartradar"
    ></div>
    <div class="chart-title">
      <img src="@/assets/img/login/left-1.png">
      <div>AI智能分析</div>
    </div>
    <div class="chart-select">
      <el-select
        v-model="active"
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <!-- <div class="chart-info">
      <el-icon>
        <ChatLineSquare />
      </el-icon>
      <div>能力详情</div>
    </div>
    <div
      class="chart-btn all-btn"
      @click="$message.success('加速研发中，敬请期待~')"
    >
      <el-icon>
        <Setting />
      </el-icon>
      <div>综合能力设定</div>
    </div> -->
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
      active: "",
      options: [],
      data: [],
      data3: [
        {
          name: "2024",
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Development", max: 52000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
          value: [4200, 3000, 20000, 35000, 50000, 50000, 50000, 18000],
        },
        {
          name: "2025",
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Development", max: 52000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
          value: [4200, 3000, 20000, 35000, 50000, 50000, 50000, 18000],
        },
      ],

      data2: {
        xAxis: ["2024", "2025", "2026", "2027"],
        //达成值
        achieve: 5,
        series: [
          {
            name: "目标1",
            data: [80, 60, 70, 65],
          },
          {
            name: "目标2",
            data: [80, 60, 70, 65],
          },
          {
            name: "目标3",
            data: [80, 60, 70, 65],
          },
        ],
      },
    };
  },
  mounted() {
    this.getData();
    this.initChartRadar();
  },
  methods: {
    initChartRadar() {
      this.chartDom = this.$refs.chartradar;
      this.myChart = this.$echarts.init(this.chartDom);
      let indicator = [
        {
          name: "工程伦理与职业素养",
          max: 88,
        },
        {
          name: "团队协作与沟通能力",
          max: 88,
        },
        {
          name: "问题解决与创新思维",
          max: 88,
        },
        {
          name: "跨学科知识应用能力",
          max: 88,
        },
        {
          name: "技术应用能力",
          max: 88,
        },
      ];
      const data1 = [[80, 50, 55, 80, 50]];
      const data2 = [[60, 60, 65, 60, 70]];

      const option = {
        color: ["rgba(0,183,238, 1)", "rgba(86,199,60, 1)"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          icon: "circle",
          right: "20%",
          top: "center",
          orient: "vertical",
          itemGap: 30,
          textStyle: {
            fontSize: 15,
            color: "#000",
          },
          data: ["2024年", "2025年"],
        },
        label: {
          color: "red",
        },
        radar: {
          radius: "40%",
          startAngle: 90,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
            fontSize: 20,
            color: "#000",
            fontStyle: "normal",
            fontWeight: "normal",
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#999",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#999",
            },
          },
          indicator: indicator,
        },
        series: [
          {
            name: "2024年",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: "rgba(86,199,60, 0.4)",
              },
            },
            itemStyle: {
              color: "rgba(86,199,60, 1)",
              borderColor: "rgba(86,199,60, 0.3)",
              borderWidth: 10,
            },
            lineStyle: {
              normal: {
                color: "rgba(86,199,60, 1)",
                width: 2,
              },
            },
            data: data1,
          },
          {
            name: "2025年",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgba(0,183,238, 1)",
                borderColor: "rgba(0,183,238, 0.4)",
                borderWidth: 10,
              },
            },
            areaStyle: {
              normal: {
                color: "rgba(0,183,238, 1)",
              },
            },
            lineStyle: {
              normal: {
                color: "rgba(0,183,238, 1)",
                width: 2,
              },
            },
            data: data2,
          },
        ],
      };

      this.myChart.setOption(option);
    },
    getData() {
      const url = "/tes/graduation/statistic";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          console.log(res.radar);
          this.data = res.radar;
          this.options = this.data.map((item) => item.name);
          console.log(this.options);
        })
        .finally(() => {});
    },
    handleChange() {},
  },
};
</script>
<style lang="scss" scoped>
#zonghechart1 {
  position: relative;
  .chartradar {
    width: 100%;
    height: 360px;
  }
  .chart-select {
    width: 110px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .chart-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #3761ac;
    img {
      width: 30px;
    }
  }
  .chart-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 14px;
    color: #457aff;
    cursor: pointer;
    &:hover {
      color: #3761ac;
    }
  }
  .chart-btn {
    position: absolute;
    top: -67px;
    right: -22px;
    height: 30px;
    line-height: 30px;
  }
}
</style>